<!--  个人信息-->
<template>
	<view class="user_container">
		<view class="user_list display space-between align-items auto">
			<view class="user_left">修改头像</view>
			<view class="user_right display align-items" @click="choseImg">
				<image class="user_right_image" :src="imgUrl+userInfo.avatar" mode=""></image>
				<image class="user_right_icon" src="../../../static/icon/right.png"></image>
			</view>
		</view>
		<view class="user_list display space-between align-items auto">
			<view class="user_left">修改昵称</view>
			<input type="text" v-model="userInfo.nickname" class="user_right display align-items" placeholder="请输入您的昵称" />
		</view>
		<view class="user_list display space-between align-items auto">
			<view class="user_left">手机号</view>
			<input type="text" v-model="userInfo.mobile" class="user_right display align-items" placeholder="请填写手机号" />
			<!-- <view class="user_right display align-items">{{userInfo.mobile}}</view> -->
		</view>
		<view class="btn display align-items space-center letter-spacing" @click="submitBtn">确认修改</view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>

<script>
	import isLogin from '../../../components/isLogin.vue'
	export default {
		data() {
			return {
				userInfo: {},
				imgUrl: '',
				isLogin: 1
			}
		},
		components: {
			isLogin,
		},
		onLoad() {
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				this.imgUrl = this.$imgUrl
				var userInfo = uni.getStorageSync('userInfo')
				this.userInfo = userInfo
			}
		},
		methods: {
			submitBtn() {
				let that = this
				if (that.check.isEmpty(that.userInfo.nickname)) {
					return uni.showToast({
						title: '请填写您的昵称',
						icon: "none"
					})
				}
				if (that.userInfo.mobile != '') {
					console.log('1111')
					var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
					if (!reg_tel.test(that.userInfo.mobile)) {
						return uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
					}
				}
				var data = {
					openid: uni.getStorageSync('openid'),
					avatar: that.userInfo.avatar,
					nickname: that.userInfo.nickname,
					mobile: that.userInfo.mobile,
				}
				this.$myRequest.post(this.$api.mine.chgInfo, data).then(res => {
					if (res.code == '200') {
						var user = that.userInfo
						uni.setStorageSync('userInfo', user)
						uni.showToast({
							title: '修改成功',
							icon: "success",
							success() {
								setTimeout(function() {
									uni.navigateBack()
								}, 1500)
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			choseImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(this.$api.img)
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: '加载中...'
						});
						uni.uploadFile({
							url: this.$api.img + this.$api.upload.upload, //post请求的地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res1) => {
								uni.hideLoading()
								var data = JSON.parse(res1.data)
								if (data.code == '200') {
									var avatar = data.data.url
									this.userInfo.avatar = avatar
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							}
						})
					},
				})
			},
			// 监听
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				var userInfo = uni.getStorageSync('userInfo')
				this.userInfo = userInfo
			},

		}
	}
</script>

<style lang="scss" scoped>
	.user_container {
		.user_list {
			width: 690rpx;
			padding: 31rpx 0;
			border-bottom: 2px solid #E5E5E5;

			.user_left {
				font-size: 26rpx;
			}

			.user_right {
				font-size: 24rpx;
				padding-right: 5rpx;
				text-align: right;

				.user_right_image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}

				.user_right_icon {
					width: 40rpx;
					height: 40rpx;
					margin-left: 15rpx;
				}
			}
		}


	}
</style>
